<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>选择车辆</title>
    <!--<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">-->
    <link rel="stylesheet" href="../../../resource/css/index.css">
</head>
<body>
<div id="app">
<template>
  <van-cell-group>
      <van-cell v-if="list.length > 0" v-for="item in list"
        :title="item.car_name"
        :label="item.car_model" 
        :url="`violationResults.html?cc=${item.car_code}&ec=${item.engine_code}&sc=${item.class_code}`" is-link>
        <!-- <div class="cont"><img class="licon" slot="icon" :src="item.car_pic"></div> -->
        <img class="licon" slot="icon" :src="item.car_pic">
      </van-cell>
      <van-cell v-if="list.length == 0" class="divtip">
        <div class="cont">
          <img :src="tipico" class="ximg">
          <p>暂无车辆，快去添加吧~</p>
        </div>
      </van-cell>
  </van-cell-group>
  <div class="btn"><van-button plain hairline type="default" size="large" url="authentication.html" >添加车辆</van-button></div>  
</template>
</div>
<!--<script src="http://vuejs.org/js/vue.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>-->
<!--<script src='http://app.lxh.magcloud.cc/public/static/dest/js/libs/magjs-x.js'></script>-->
<!--<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>-->
<!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
<!--<script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script>-->
<script src="../../../resource/js/vue.min.js"></script>
<script src="../../../resource/js/vant.min.js"></script>
<script src="../../../resource/js/magjs-x.js"></script>
<script src="../../../resource/js/vue-router.js"></script>
<script src="../../../resource/js/axios.min.js"></script>
<script src="../../../resource/js/qs.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            title: '选择车辆',
            list: [],
            tipico: 'http://download.bihuapp.com/icon/pic.png',
            token: ''
        },
        created () {
            mag.toLogin(function(rs) {
            this.token = rs.token
            localStorage.setItem('token', rs.token)
          });
            this.getCarList();
        },
        methods: {
          getCarList () {
              let that = this
              let postparams = {
                token: localStorage.getItem('token'),
              }
              axios.post('/CarInfo/getUserCarInfoList', postparams).then(({data}) => {
                  if (data.code === 200) {
                  that.list = data.data;
                } else {
                  that.list = ''
                }
              })
            }              
        }
    })
  </script>
<style scoped>
.white{
  fill: #fff;
}
.btn{
  margin: 10px;
  text-align: center
}
.tap{
  font-size: 14px;
  color: #808080;
  padding: 10px;
}
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}

.agree{
  font-size: 12px;
  padding: 15px 10px;
}

.foottip{
  font-size: 12px;
  position: fixed;
  bottom: 15px;
}
.divtip{
  text-align: center;
}

.licon {
  width: 60px;
  height: 60px;
  background-color: #F4F8FA;
  margin-right: 8px;
}
.ximg{
    max-width: 40%;
    display: block;
    margin: 10px auto;
}
p{
  font-size: 14px;
  text-align: center;
}
</style>
</body>
</html>